<template>
  <div class="mapBox">
    <div id="container"></div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
            position:{}
    };
  },
  watch:{
      position(a,b){
        this.lnglat()
      }
  },
  methods: {
    get() {
        let that=this
      var map = new AMap.Map("container", {
        resizeEnable: true, 
        zoom:11
      });
      AMap.plugin('AMap.PlaceSearch',function(){//异步加载插件
      
      });
      var $ = function(elementId) {
        return document.getElementById(elementId);
      };
      var lnglatInput = $("lnglat");
      map.setDefaultCursor("pointer");
      map.on("click", function(e) {
        that.position=e.lnglat
      });
    },
    lnglat(){
        this.$emit("position",this.position)
    }
  },
  mounted(){
      this.get()
  }
};
</script>
<style scoped>
.mapBox {
    height: 100%;
    width: 100%;
}
#container {
    width: 100%;
    height: 100%;
}

.btn{
    width:14em;
    margin-left:3.2rem;  
}
</style>
